<template>
	<view style="padding: 20rpx 0;">
		<u-upload :fileList="fileList" uploadIcon="plus" @afterRead="afterRead" @delete="deletePic" name="1" multiple
			:maxCount="9"></u-upload>
	</view>
</template>

<script setup lang="ts">
	import { ref, defineEmits, watch } from 'vue';
	// import userHttp from '@/request/user'
	const emit = defineEmits(['change'])
	const fileList = ref([]);
	watch(fileList.value, () => {
		const url_list = fileList.value.map(item => {
			return item.url
		})
		emit('change', url_list)
	})
	// 删除图片
	const deletePic = (event : { index : number; }) => {
		fileList.value.splice(event.index, 1);
	};
	// 新增图片
	const afterRead = async (event : { file : any; }) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			// 自定义用户上传
			// const result = await userHttp.uploadFile(lists[i].url);
			
			const result = ""
			let item = fileList.value[fileListLen];
			fileList.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};
</script>

<style lang="less" scoped>

</style>